<template>
  <div
    style="width: 100%"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false"
  >
    <el-input
      v-model="formData[prop + '_name']"
      @click="showDialog"
      placeholder="--请选择--"
      :disabled="calcDisabled"
      readonly
    >
      <template #suffix>
        <cc-icon
          v-if="hovering && formData[prop]"
          style="cursor: pointer;color: #c0c4cc"
          @click.stop="clearData"
          iconId="018dca412c4ebd53fd1d"
        />
      </template>
    </el-input>
    <el-dialog
      v-model="dialogVisible"
      :width="dialogWidth"
      append-to-body
      destroy-on-close
      draggable
      :close-on-click-modal="false"
      :fullscreen="dialogFullscreen"
      class="cc-page-comp-dialog no-padding"
    >
      <template #header>
        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
          <div class="title">{{dialogTitle}}</div>
          <div class="button">
            <cc-icon
              v-if="!dialogFullscreen"
              iconId="018dca8cad1b28075ecd"
              @click="dialogFullscreen=true"
              title="最大化"
            />
            <cc-icon
              v-if="dialogFullscreen"
              iconId="018dca8cad1b9b03c47f"
              @click="dialogFullscreen=false"
              title="缩小"
            />
          </div>
        </div>
      </template>
      <Page ref="pageRef" :dataPageId="pageId" :inputParam="inputParam" />
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="dialogVisible = false"
        >取消</el-button>
        <el-button
          size="default"
          type="primary"
          @click="() => submitDialogForm(null)"
        >确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, computed, inject } from 'vue';
import { ElMessage, useDisabled } from 'element-plus';
import Page from '@/codeless/view/page.vue';

const emit = defineEmits(['change']);
const props = defineProps({
  prop: {
    type: String,
    default: ''
  },
  idProp: {
    type: String,
    default: 'id'
  },
  nameProp: {
    type: String,
    default: 'name'
  },
  pageId: String,
  dialogFullscreen: {
    type: Boolean,
    default: false
  },
  dialogWidth: {
    type: Number,
    default: 0
  },
  dialogTitle: String,
  inputParam: Object,
  disabled: Boolean,
});

const inputDisabled = useDisabled();
const formData = inject('formData');
const dialogTitle = ref('');
const dialogFullscreen = ref(props.dialogFullscreen);
const dialogVisible = ref(false);
const pageRef = ref();
const hovering = ref(false);

const showDialog = () => {
  dialogVisible.value = true;
};

const clearData = () => {
  formData.value[props.prop] = '';
  formData.value[props.prop + '_name'] = '';
};

const submitDialogForm = () => {
  if (!pageRef.value) return;
  const pageData = pageRef.value.getData();
  if (!pageData) return;

  for (const dataList of Object.values(pageData)) {
    if (!(dataList instanceof Array)) continue;

    if (dataList.length === 0) {
      ElMessage.error("请先选择一条记录！");
    } else if (dataList.length > 1) {
      ElMessage.error("只能选择一条记录！");
    } else {
      const data = dataList[0];
      formData.value[props.prop] = data[props.idProp];
      formData.value[props.prop + '_name'] = data[props.nameProp];
      dialogVisible.value = false;
      emit('change');
      return;
    }
  }
};

const calcDisabled = computed(() => {
  return inputDisabled.value || props.disabled;
});

watch(() => props, () => {
  dialogTitle.value = (props.dialogTitle || '') + ' 选择';
}, {immediate: true, deep: 1});
</script>

<style>
.remote-select-box .el-select-dropdown__wrap {
  max-height: 70vh;
  text-align: left;
}
</style>
<style scoped>
.empty {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
}
</style>
